import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
import Login from '../pages/Login/index';
import UserManagement from '../pages/UserManagement/index';
import CaseManagement from '../pages/CaseManagement/index';
import { Suspense, lazy } from 'react';
import { Spin } from 'antd';
import ProtectedRoute from '../components/ProtectedRoute';

// 懒加载组件
const Layout = lazy(() => import('../components/Layout'));

const router = createBrowserRouter([
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/',
    element: (
      <ProtectedRoute>
        <Suspense fallback={<Spin size="large" style={{ display: 'block', margin: '20px auto' }} />}>
          <Layout />
        </Suspense>
      </ProtectedRoute>
    ),
    children: [
      {
        path: 'users',
        element: <UserManagement />
      },
      {
        path: 'cases',
        element: <CaseManagement />
      },
      {
        path: '',
        element: <Navigate to="/users" replace />
      }
    ]
  }
]);

export default function AppRouter() {
  return <RouterProvider router={router} />;
}